/**
 * 详情页发送请求获取数
 */
function ProductDetail() {
    let href = location.href
    // console.log(href)
    let id = href.substring(href.indexOf('?id=') + 4)
    // console.log(id)

    $.ajax({
        type: 'get',
        url: 'http://www.xiongmaoyouxuan.com/api/detail',
        data: {
            id
        },
        success: function (res) {
            // console.log(res.data)
            let data = res.data
            let detailAside = template('detail-data', {
                detailData: data
            })
            $('aside').html(detailAside)
            // bannerImg()
            tabChange()

        }
    })

}

/**
 * 轮播效果
 */
function bannerImg() {
    var mySwiper = new Swiper('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // autoplay: true,
        effect: 'slide',
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },


        on: {
            init: function (swiper) {
                //Swiper初始化了
                console.log('当前的slide序号是' + this
                    .activeIndex); //或者swiper.activeIndex，swiper与this都可指代当前swiper实例
                this.emit('transitionEnd'); //在初始化时触发一次transitionEnd事件，需要先设置transitionEnd

            },
        },
    })
}

/**
 * 去购买
 */
function toBuy(url) {
    location.href = url
}

/**
 * 加入购物车
 *      点击加入购物车，获取localStorage的数据查看该条数据还是否已存在
 *      若已存在数量加一，否则追加到localStorage
 */
function toShopCar(id) {
    $.ajax({
        type: 'get',
        url: 'http://www.xiongmaoyouxuan.com/api/detail',
        data: {
            id
        },
        success: function (res) {
            // console.log(res.data)
            let id = res.data.detail.id
            let fromstorange = localStorage.getItem('xiongmaoyouxuanCar')
            let storangeData = JSON.parse(fromstorange) || []
            // console.log(typeof storangeData)
            let shop = storangeData.find(item => item.id == id)
            if (!shop) {
                shop = {
                    ...res.data.detail,
                    num: 1,
                    singleTotlePrice: res.data.detail.price,
                    selectState: false
                }
                storangeData.push(shop)
            } else {
                shop.num++
                shop.singleTotlePrice = (shop.price * shop.num).toFixed(2)
            }
            localStorage.setItem('xiongmaoyouxuanCar', JSON.stringify(storangeData))
            alert('成功加入购物车')
        }
    })
}

/**
 * 选项卡
 */
function tabChange() {
    $('.tabOl li:first-child').addClass('onol')

    //点击小图，大图跟着变
    $('.tabOl').on('click', 'li', function () {
        let src = $(this).children()[0].getAttribute('src')
        clickStyle($(this))
        $('.tabUl li img')[0].setAttribute('src', src)
        $('.bigClass img')[0].setAttribute('src', src)
    })
    boxAction()
}

/**
 * 点击样式
 */
function clickStyle(dom) {
    $('.tabOl li').removeClass('onol')
    dom.addClass('onol')
}

/**
 * 放大镜
 */
function boxAction() {
    //计算放大镜图片大小
    // ulli*bigClass/box = img
    let w = $('.tabUl li img').width() * $('.bigClass').width() / $('.box').width()
    let h = $('.tabUl li img').height() * $('.bigClass').height() / $('.box').height()
    $('.bigClass').children()[0].style.width = w + 'px'
    $('.bigClass').children()[0].style.height = h + 'px'
    console.log(w, h)
    //半透明块box的行为
    $('.tabUl li').on('mouseover', function () {
        $('.box')[0].style.display = 'block'
        $('.bigClass')[0].style.display = 'block'
    })
    $('.tabUl li').on('mouseout', function () {
        $('.box')[0].style.display = 'none'
        $('.bigClass')[0].style.display = 'none'
    })

    $('.tabUl li img').on('mousemove', function (e) {
        e = e || window.event

        let x = e.offsetX - $('.box').width() / 2
        let y = e.offsetY - $('.box').height() / 2
        //边界检查
        if (x < 0) x = 0
        if (x > $(this).width() - $('.box').width()) x = $(this).width() - $('.box').width()
        if (y < 0) y = 0
        if (y > $(this).height() - $('.box').height()) y = $(this).height() - $('.box').height()
        $('.box')[0].style.left = x + 'px'
        $('.box')[0].style.top = y + 'px'

        //计算放大镜图片移动的距离
        //x/img = ulli/bigc
        let bigx = x* $('.bigClass').width() / $('.box').width() 
        let bigy = y* $('.bigClass').height() / $('.box').height() 
        $('.bigClass img')[0].style.top = -bigy + 'px'
        $('.bigClass img')[0].style.left = -bigx + 'px'

    })


}

ProductDetail()